<template>
  <div class="personal">
    <!--账号设置--> 
                  
    <el-form :model="userForm" :rules="rules" ref="userForm" label-width="110px" class="accountSet">
      <el-form-item label="头像" prop="imgUrl">
                  <div id="demo"> 
                         <!-- 遮罩层 --> 
                    <div class="container" v-show="panel"> 
                      <div> 
                      <img id="image" :src="url" alt="Picture"> 
                      </div>
                      <button type="button" id="button2" @click="crop2">取消</button>
                      <button type="button" id="button" @click="crop">确定</button>

                     </div> 
                     <div class="v_nox clearfix"> 
                       <div class="show"> 
                        <div class="picture" > 
                        <img :src="headerImage" :onerror="errorImg01"/>
                        </div> 
                       </div>
                       <div class="v_show"> 
                        <div class="v_file">
                        <input type="file" id="change" accept="image" @change="change"> 上传图片</div>
                        <label for="change"></label> 
                       </div> 
                     </div>  
                      </div>
      </el-form-item>

      <el-form-item label="用户名" size="mini" prop="hostName">
        <el-input v-model="userForm.hostName" placeholder="请输入用户名" maxlength="30"></el-input>
        <!-- <span class="txtWZ">用户邀请码，用户成功关联后可接受您发布的项目需求</span> -->
      </el-form-item>
      <el-form-item label="简介" size="mini" prop="description">
        <el-input v-model="userForm.description" placeholder="简介" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="推广平台" size="mini">
        <!-- <el-input v-model="userForm.hostName" placeholder="推广平台" maxlength="30"></el-input> -->
          <el-select v-model="value5" multiple placeholder="请选择推广平台">
                 <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
        <!-- <span class="txtWZ">未认证，认证后可发布公开项目，<span class="txtBtn">马上认证</span></span> -->
      </el-form-item>
      <el-form-item label="擅长领域" size="mini">
        <!-- <el-input v-model="userForm.hostPhone" placeholder="擅长领域"></el-input> -->
        <el-select v-model="value10" multiple placeholder="请选择推广平台">
                 <el-option
                      v-for="item in options2"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
        <!-- <span class="txtBtn">更绑手机</span> -->
      </el-form-item>
      <el-form-item label="绑定微信" size="mini" prop="hostWX">
        <!-- <el-input v-model="userForm.hostWX" placeholder="绑定微信" maxlength="30"></el-input> -->
        <span class="txtBtn" v-if="userForm.hostWX!=null && userForm.hostWX!=''">{{userForm.wxname}}</span>
        <span class="txtBtn txtBtn2" v-if="userForm.hostWX==null || userForm.hostWX==''" @click="goqrcode">绑定微信</span>

      </el-form-item>
      <el-form-item  size="mini" >
        <el-button type="primary" @click="submit('userForm')" class="primary-button">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {commonService} from '../../service/commonService'
  // import uploadOriginal from '../../../component/upload/uploadLR.vue'
  import Cropper from 'cropperjs'

  export default {
    // props: [],
    data () {
      return {
         options: [],
         options2:[],
         value5: [],
         value10: [],
         errorImg01: 'this.src="' + require('../../assets/image/common/default_photo.png') + '"',
         headerImage:'', 
         panel:false, 
         url:'',
         width:'',
         height:'',
         headImg:'',

        rules: {
          imgUrl: [],
          account: [],
          hostName: [
            { required: true, message: '请输入发布商名称', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入简介', trigger: 'blur' },
            { min: 1, max: 150, message: '150个字符内', trigger: 'blur' }
          ],
        },
        userForm:{
          hostName:'', // 用户名称
          description: '', // 简介
          hostPhone:'', // 手机号
          wxname:'',
          hostWX:','

        },
     
      }
    },
    computed: {
       
            picHead() {
                return this.$store.state.picHead
            },
        },
    mounted () {
      // let that = this;
      this.getUsersprofile();
      this.getExtension()
      this.getField()
      var self = this; 
             var image = document.getElementById('image'); 
             this.cropper = new Cropper(image, { 
             aspectRatio: 1, 
             viewMode: 1, 
             background:false, 
             zoomable:false, 
             crop: function () { 
                  self.croppable = true; 
              } 
  });

    },
    methods: {
      goqrcode:function(){
         this.$router.push({path:"/qrcode"})
      },
      submit(formName){
        let that=this;
        this.$refs[formName].validate((valid) => {
          if (valid) { // 验证成功
            commonService.putUpdate({
             
              name:that.userForm.hostName,
              description: that.userForm.description,
              platformIds: that.value5,
              territoryIds: that.value10,
              headImg:that.headImg
            }).then(function(res){
              if(res.data.success){
                that.$router.replace({name: 'setup'});
                that.$router.go(0);
              }else{}
            });
          }
        });
      },
      // 获取账号信息
      getUsersprofile(){
        let that=this;
        commonService.getUsersprofile().then(function(res){
          if(res.data.success){
            console.log(res)
            let obj = res.data.datas;
            that.userForm ={
              id: obj.id,
              account: obj.code, // 用户ID
              hostName: obj.name, // 用户名称
              description: obj.description, // 简介
              hostPhone: obj.phone, // 手机号
              platformIds: obj.platformIds,
              territoryIds: obj.territoryIds,
              hostWX: obj.unionid, // 微信
              wxname:obj.wxName,
            };
            if(obj.territoryIds!=null && obj.territoryIds!=''){
              obj.territoryIds=obj.territoryIds.split(',')
              obj.territoryIds=obj.territoryIds.map(Number)
               that.value10=obj.territoryIds

            }
            if(obj.platformIds!=null && obj.platformIds!=''){
              obj.platformIds=obj.platformIds.split(',')
              obj.platformIds=obj.platformIds.map(Number)
               that.value5=obj.platformIds

            }
            if(obj.headImg != null){
              that.headerImage = that.picHead + obj.headImg; // 头像
            }
          }else{

             }
          })
        },
        // 获取推广平台
        getExtension:function(){
          let that=this;
            commonService.getDictionaries({type:4}).then(function(res){
                               if(res.data.code == 200){
                                 that.options=res.data.datas
                                 console.log(that.options)
                          // that.description=res.data.datas.description
                           // that.$refs.v_description.innerText=res.data.datas.description
                          }
              })
        },
        // 获取擅长领域
        getField:function(){
          let that=this;
            commonService.getDictionaries({type:3}).then(function(res){
                               if(res.data.code == 200){
                                 that.options2=res.data.datas
                                 console.log(that.options)
                          // that.description=res.data.datas.description
                           // that.$refs.v_description.innerText=res.data.datas.description
                          }
              })
        },
       getObjectURL (file) { 
                    var url = null ;  
                    if (window.createObjectURL!=undefined) { // basic 
                     url = window.createObjectURL(file) ; 
                    } else if (window.URL!=undefined) { // mozilla(firefox) 
                     url = window.URL.createObjectURL(file) ; 
                    } else if (window.webkitURL!=undefined) { // webkit or chrome 
                     url = window.webkitURL.createObjectURL(file) ; 
                    } 
                    return url ; 
                   }, 
         change (e) { 
                       let files = e.target.files || e.dataTransfer.files; 
                       if (!files.length) return; 
                      
                      
                       this.picValue = files[0]; 
                        if(this.picValue.type!="image/image" && this.picValue.type!="image/jpeg" && this.picValue.type!="image/bmp" && this.picValue.type!="image/png" && this.picValue.type!="image/jpg"){
                             this.$message.error('上传头像只能是jpg、jpeg、png、bmp格式!');
                             return false
                       } 
                        if(this.picValue.size / 1024 / 1024 > 2){
                             this.$message.error('上传头像大小不能超过 2MB!');
                             return false
                       }
                       this.panel = true; 
                       this.url = this.getObjectURL(this.picValue); 
                         //每次替换图片要重新得到新的url 
                       if(this.cropper){ 
                        this.cropper.replace(this.url); 
                       } 
                       this.panel = true; 
                      }, 
              crop () { 
                      let that=this
                       this.panel = false; 
                       var croppedCanvas; 
                       var roundedCanvas; 
                       if (!this.croppable) { 
                        return; 
                       } 
                       croppedCanvas = this.cropper.getCroppedCanvas(); 
                   
                       roundedCanvas = this.getRoundedCanvas(croppedCanvas); 

                       this.headerImage = roundedCanvas.toDataURL(); 
            commonService.postBase({base64Img:that.headerImage,width:that.width,height:that.height}).then(function(res){
                    that.headImg = res.data.datas;
                          // commonService.putUpdate({headImg:img}).then(function(res){
                          //               // that.getUsersprofile()
                          //          })
                  
                })

                     }, 
              getRoundedCanvas (sourceCanvas) { 
                let that = this;
                      var canvas = document.createElement('canvas'); 
                      var context = canvas.getContext('2d'); 
                      var width = sourceCanvas.width; 
                      var height = sourceCanvas.height; 

                      that.width = 270;
                      that.height = 270;
                      canvas.width = that.width; 
                      canvas.height = that.height; 

                      context.imageSmoothingEnabled = true; 
                      context.drawImage(sourceCanvas, 0, 0, that.width, that.height); 
                      context.globalCompositeOperation = 'destination-in'; 
                      context.beginPath(); 
                      context.arc(that.width / 2, that.height / 2, Math.min(that.width, that.height) / 2, 0, 2 * Math.PI, true); 
                      context.fill(); 
                      return canvas; 
                     },
                 crop2:function(){
                   this.panel=false
                 },
    }
  }
</script>
<style lang="less">
@import url('../../assets/css/base.less');
  .personal{
    padding-top: 15px;
	.accountSet{width: 600px;}
    .txtWZ{font-size: 12px; color:#999;}
    .txtBtn{font-size: 12px; color:#409EFF;}
    .txtBtn2{cursor: pointer;}
    .el-select--mini{
  	   width: 100%;
     }
      #demo #button2{
              position: absolute;
              left: 10px;
              top: 10px;
              width: 80px;
              height: 40px;
              border: none;
              border-radius: 5px;
              background: white;
         }
          @keyframes myfirst
{
    0%   {right: -160px;}
    // 25%  {right: -80px;}
    // 50%  {right: -40px;}
    100% {right: 0px;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {right: -160px;}
    // 25%  {right: -80px;}
    // 50%  {right: -40px;}
    100% {right: 0px;}
}  
     #demo #button { 
        position: absolute; 
        right: 10px; 
        top: 10px; 
        width: 80px; 
         height: 40px; 
         border:none; 
        border-radius: 5px; 
 background:white; 
}
#demo .show { 
  float: left;
  // margin-top: 0.2rem;
  // margin-left: 0.2rem;
 // width: 100%; 
 // height: 100%; 
 overflow: hidden; 
 position: relative; 
 // border-radius: 50%; 
 // border: 1px solid #d5d5d5; 
}
#demo .picture { 
 width: 140px; 
 height: 140px; 
 // margin: -1px -1px;
 overflow: hidden; 
 border-radius: 50%;
 background-position: center center; 
 background-repeat: no-repeat; 
 background-size: cover; 
  img{
    width: 142px;
    height: 142px;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 50%;
  }
}
#demo .v_nox{
   position: relative;
    // height: 100px;
}
#demo .v_show{
    // float: right;
    // margin-top: 0.6rem;
    // width: 1rem;
    // margin-right: 0.2667rem;
     // height: 1rem;
     position: absolute;
     left: 0;
     bottom: 4px;
     width: 140px;
     height: 30px;
     // height: 100px;
     .v_file{
        // display: inline-block;
        position: relative;
        height: 30px;
        // padding: 3px 5px;
        border-radius: 3px;
        line-height: 30px;
        width: 140px;
        text-align: center;
        // overflow: hidden;
        color:#fff;
        background-color: #ccc; 
input{
      position: absolute;
      width: 100%;
      height: 100%;
      // height: 30px;
      top: 0;
      left: 0;
      outline: none;
      background-color: transparent;
      filter:alpha(opacity=0);
      -moz-opacity:0;
      -khtml-opacity: 0;
      opacity: 0;
    }
     }
 
   

}
#demo .container { 
 z-index: 99; 
 position: fixed; 
 padding-top: 60px; 
 left: 0; 
 top: 0; 
 right: 0; 
 bottom: 0; 
 background:rgba(0,0,0,1); 
}
  
#demo #image { 
 max-width: 100%; 
} 
  
.cropper-view-box,.cropper-face { 
 border-radius: 50%; 
} 
/*! 
 * Cropper.js v1.0.0-rc 
 * https://github.com/fengyuanchen/cropperjs 
 * 
 * Copyright (c) 2017 Fengyuan Chen 
 * Released under the MIT license 
 * 
 * Date: 2017-03-25T12:02:21.062Z 
 */
  
.cropper-container { 
 font-size: 0; 
 line-height: 0; 
  
 position: relative; 
  
 -webkit-user-select: none; 
  
  -moz-user-select: none; 
  
  -ms-user-select: none; 
  
   user-select: none; 
  
 direction: ltr; 
 -ms-touch-action: none; 
  touch-action: none 
} 
  
.cropper-container img { 
 /* Avoid margin top issue (Occur only when margin-top <= -height) */
 display: block; 
 min-width: 0 !important; 
 max-width: none !important; 
 min-height: 0 !important; 
 max-height: none !important; 
 width: 100%; 
 height: 100%; 
 image-orientation: 0deg 
} 
  
.cropper-wrap-box, 
.cropper-canvas, 
.cropper-drag-box, 
.cropper-crop-box, 
.cropper-modal { 
 position: absolute; 
 top: 0; 
 right: 0; 
 bottom: 0; 
 left: 0; 
} 
  
.cropper-wrap-box { 
 overflow: hidden; 
} 
  
.cropper-drag-box { 
 opacity: 0; 
 background-color: #fff; 
} 
  
.cropper-modal { 
 opacity: .5; 
 background-color: #000; 
} 
  
.cropper-view-box { 
 display: block; 
 overflow: hidden; 
  
 width: 100%; 
 height: 100%; 
  
 outline: 1px solid #39f; 
 outline-color: rgba(51, 153, 255, 0.75); 
} 
  
.cropper-dashed { 
 position: absolute; 
  
 display: block; 
  
 opacity: .5; 
 border: 0 dashed #eee 
} 
  
.cropper-dashed.dashed-h { 
 top: 33.33333%; 
 left: 0; 
 width: 100%; 
 height: 33.33333%; 
 border-top-width: 1px; 
 border-bottom-width: 1px 
} 
  
.cropper-dashed.dashed-v { 
 top: 0; 
 left: 33.33333%; 
 width: 33.33333%; 
 height: 100%; 
 border-right-width: 1px; 
 border-left-width: 1px 
} 
  
.cropper-center { 
 position: absolute; 
 top: 50%; 
 left: 50%; 
  
 display: block; 
  
 width: 0; 
 height: 0; 
  
 opacity: .75 
} 
  
.cropper-center:before, 
 .cropper-center:after { 
 position: absolute; 
 display: block; 
 content: ' '; 
 background-color: #eee 
} 
  
.cropper-center:before { 
 top: 0; 
 left: -3px; 
 width: 7px; 
 height: 1px 
} 
  
.cropper-center:after { 
 top: -3px; 
 left: 0; 
 width: 1px; 
 height: 7px 
} 
  
.cropper-face, 
.cropper-line, 
.cropper-point { 
 position: absolute; 
  
 display: block; 
  
 width: 100%; 
 height: 100%; 
  
 opacity: .1; 
} 
  
.cropper-face { 
 top: 0; 
 left: 0; 
  
 background-color: #fff; 
} 
  
.cropper-line { 
 background-color: #39f 
} 
  
.cropper-line.line-e { 
 top: 0; 
 right: -3px; 
 width: 5px; 
 cursor: e-resize 
} 
  
.cropper-line.line-n { 
 top: -3px; 
 left: 0; 
 height: 5px; 
 cursor: n-resize 
} 
  
.cropper-line.line-w { 
 top: 0; 
 left: -3px; 
 width: 5px; 
 cursor: w-resize 
} 
  
.cropper-line.line-s { 
 bottom: -3px; 
 left: 0; 
 height: 5px; 
 cursor: s-resize 
} 
  
.cropper-point { 
 width: 5px; 
 height: 5px; 
  
 opacity: .75; 
 background-color: #39f 
} 
  
.cropper-point.point-e { 
 top: 50%; 
 right: -3px; 
 margin-top: -3px; 
 cursor: e-resize 
} 
  
.cropper-point.point-n { 
 top: -3px; 
 left: 50%; 
 margin-left: -3px; 
 cursor: n-resize 
} 
  
.cropper-point.point-w { 
 top: 50%; 
 left: -3px; 
 margin-top: -3px; 
 cursor: w-resize 
} 
  
.cropper-point.point-s { 
 bottom: -3px; 
 left: 50%; 
 margin-left: -3px; 
 cursor: s-resize 
} 
  
.cropper-point.point-ne { 
 top: -3px; 
 right: -3px; 
 cursor: ne-resize 
} 
  
.cropper-point.point-nw { 
 top: -3px; 
 left: -3px; 
 cursor: nw-resize 
} 
  
.cropper-point.point-sw { 
 bottom: -3px; 
 left: -3px; 
 cursor: sw-resize 
} 
  
.cropper-point.point-se { 
 right: -3px; 
 bottom: -3px; 
 width: 20px; 
 height: 20px; 
 cursor: se-resize; 
 opacity: 1 
} 
  
@media (min-width: 768px) { 
  
 .cropper-point.point-se { 
 width: 15px; 
 height: 15px 
 } 
} 
  
@media (min-width: 992px) { 
  
 .cropper-point.point-se { 
 width: 10px; 
 height: 10px 
 } 
} 
  
@media (min-width: 1200px) { 
  
 .cropper-point.point-se { 
 width: 5px; 
 height: 5px; 
 opacity: .75 
 } 
} 
  
.cropper-point.point-se:before { 
 position: absolute; 
 right: -50%; 
 bottom: -50%; 
 display: block; 
 width: 200%; 
 height: 200%; 
 content: ' '; 
 opacity: 0; 
 background-color: #39f 
} 
  
.cropper-invisible { 
 opacity: 0; 
} 
  
.cropper-bg { 
 background-image: url(''); 
} 
  
.cropper-hide { 
 position: absolute; 
  
 display: block; 
  
 width: 0; 
 height: 0; 
} 
  
.cropper-hidden { 
 display: none !important; 
} 
  
.cropper-move { 
 cursor: move; 
} 
  
.cropper-crop { 
 cursor: crosshair; 
} 
  
.cropper-disabled .cropper-drag-box, 
.cropper-disabled .cropper-face, 
.cropper-disabled .cropper-line, 
.cropper-disabled .cropper-point { 
 cursor: not-allowed; 
} 
    
   }
  
</style>